<template>
  <div v-if="visible">
    <div class="fixed top-0 left-0 z-40 w-full h-full mask" @click="onClose"></div>
    <div
      class="fixed right-0 z-50 w-full max-w-md text-base bg-white top-1/4 modal"
    >
      <div class="flex items-center p-4 header">
        <div class="text-2xl font-bold text-center text-white grow">
          职等你来
        </div>
        <div class="cursor-pointer close" @click="onClose"></div>
      </div>
      <div class="px-6 pt-6 pb-10 text-sm content">
        <h2 class="mb-4 text-2xl">{{ jobInfo.title }}</h2>
        <div>
          <h4 class="mb-2 text-xl">岗位职责：</h4>
          <ul>
            <li v-for="duty in jobInfo.duty" :key="duty.id">
              {{ duty.text }}
            </li>
          </ul>
        </div>
        <div class="mt-6">
          <h4 class="mb-2 text-xl">任职要求：</h4>
          <ul>
            <li v-for="required in jobInfo.required" :key="required.id">
              {{ required.text }}
            </li>
          </ul>
        </div>
        <div class="mt-5 line"></div>
        <div class="mt-5">
          <h4 class="mb-2 text-xl">联系我们</h4>
          <p>
            <span class="text-red-600">*</span>
            <span>应聘求职：</span>
            <span class="px-2 py-1 ml-2 text-blue-600 bg-gray-300 rounded-sm"
              >HR@youcwl.com</span
            >
          </p>
          <div class="mt-10 text-center">
            <button
              class="px-10 py-2 text-base text-white rounded-lg bg-sky-500"
              @click="onClose"
            >
              确定
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const props = defineProps({
  jobInfo: {
    type: Object,
    default: () => {}
  },
  visible: {
    type: Boolean,
    default: false
  }
})
const emit = defineEmits(['close'])
function onClose() {
  emit('close')
}
</script>

<style lang="scss" scoped>
.mask {
  background-color: rgba(0, 0, 0, 0.5);
}
.modal {
  width: 500px;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  overflow: hidden;
  .header {
    background-color: #3ea0e4;
  }
  .close {
    background: url(../assets/icon_close.png) no-repeat center center;
    background-size: 32px;
    width: 32px;
    height: 32px;
  }
  .line {
    background: url(../assets/line.jpg) no-repeat center center;
    background-size: 100% 1px;
    width: 470px;
    height: 1px;
  }
  .content {
    color: #1e445d;
    max-height: calc(75vh - 80px);
    overflow-y: auto;
    overflow-x: hidden;
  }
}
::-webkit-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: #888 #f1f1f1;
}
</style>
